<!DOCTYPE html>
<html>

<head>

	<!-- meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
	<meta name="Viewport" content="width=device-width, , initial-scale=1">
	
	<!-- Will be replace the page title -->
	<title> {% block title %} Baby {% endblock %} </title>
	
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
	
	<!-- Macro: `render paginate` 
		 Effect: Display the page num of jumpping under the down position
		`posts`: the posts record from database (ex: home.html.post)
		`endpoint` : from blog.py.home(ex: blog.home)
	-->
	{% macro render_pagination(posts, endpoint) %}
		<nav>
			<ul class="pagination">
				<li>
					<!-- click jump to prev page -->
					{% if posts.has_prev %}
						<a href="{{ url_for('blog.home', page=posts.prev().page) }}" aria-label="Previous">
						<span aria-label="true" >&laquo;</span>
						</a>
					{% endif %}
				</li>
				
				<!-- Display page num -->
				{% for page in posts.iter_pages() %}
					{% if page %}
						{% if page != posts.page %}
							<li>
								<a href="{{ url_for(endpoint, page=page) }}"> {{ page }} </a>
							</li>
						{% else %}
							<li>
								<!-- `page`:current_page num -->
								<a href=""> {{ page }} </a>
							</li>
						{% endif %}
					{% else %}
						<li> <a> ... </a> </li>
					{% endif %}
				{% endfor %}
				
				<li>
					<!-- click '>' jump to next page -->
					{% if posts.has_next: %}
						<a href="{{ url_for('blog.home', page=posts.next().page)}}" aria-label="Next">
						<span aria-hidden="true">&raquo;</span>
						</a>
					{% endif %}
				</li>
			</ul>
		</nav>
	{% endmacro %}
	
</head>

{% with messages = get_flashed_messages() %}
	{% if messages %}
		<ul classs = flashes>
		{% for message in messages %}
			<li>{{ message }}</li>
		{% endfor %}
		</ul>
	{% endif %}
{% endwith %}

<body>
	<div class="container">
		
		<div class="jumbotron">
			<!-- Replace the route function to URL: `/` -->
			<h1>
				<a href="{{ url_for('blog.home') }}" > Baby beibei </a>
			</h1>
			<p>Welcome 
			<a href="{{ url_for('blog.user', username=current_user.username) }}">
				
				{% block user %}{% endblock %}
				
			</a>
			</p
			<p>
			<a href=" {{ url_for('main.login') }}" class="-btn">Login</a>
			Or
			<a href=" {{ url_for('main.logout') }}" class="-btn">Logout</a>
			</p>
		</div>
		
		{% block body %}
			body_content
		{% endblock %}
		
	</div>
	
	<!-- jQuery first, then Bootstrap JS -->
	<script src="{{ url_for('static', filename='js/jquery.min.js') }}" ></script>
	<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}" ></script>

</body>
</html>